<%@page import="com.winexpress.order.OrderHistory"%>
<%@page import="com.winexpress.account.Customer"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>WineXpress Payment</title>
    </head>
    <body>
        <t:customerNavigation/>

        <div class="container">
            <script>
                function validate(evt) {
                    if (!(evt.keyCode == 8 || evt.keyCode == 127)) {
                        var theEvent = evt || window.event;
                        var key = theEvent.keyCode || theEvent.which;
                        key = String.fromCharCode(key);
                        var regex = /[0-9]/;
                        if (!regex.test(key)) {
                            theEvent.returnValue = false;
                            if (theEvent.preventDefault)
                                theEvent.preventDefault();
                        }
                    }
                }
            </script>

            <div class="panel panel-default" style="width:70%; margin-left: 15%; margin-top: 10px" >
                <div class="panel-heading">
                    <h3 class="panel-title"><b>Make payment</b></h3>
                    <form id="defaultForm" role="form" action="/WineXpressClient/paymentManagement/viewOrder" method="post" >
                        <div class="panel-body">
                            <%OrderHistory oh = (OrderHistory) session.getAttribute("orderHistroy");%>
                            <table class="table table-striped table-bordered" style="text-align: left;">
                                <tbody>
                                    <tr><h4>Shipping Details</h4></tr>
                                <tr style="height: 10%">
                                    <td style="width: 25%; vertical-align: middle;">Receiver</td>
                                    <td><input name="receiver" value ="<%=oh.getCustomer().getFirstName()%>  <%=oh.getCustomer().getLastName()%>" style="width: 100%"></td>
                                </tr>
                                <tr style="height: 10%">
                                    <td style="width: 25%; vertical-align: middle;">Shipping Address</td>
                                    <td><input name="shippingAddress" value ="<%=oh.getCustomer().getAddress()%>" style="width: 100%"></td>
                                </tr>                          
                                <tr style="height: 10%">
                                    <td style="width: 25%; vertical-align: middle;">Postal Code</td>
                                    <td><input name="postalCode" placeholder="Postal Code" style="width: 100%"></td>
                                </tr>
                                <tr style="height: 10%">
                                    <td style="width: 25%; vertical-align: middle;">Phone number</td>
                                    <td><input name="phoneNumber" value ="<%=oh.getCustomer().getPhoneNumber()%>" style="width: 100%"></td>
                                </tr>
                                </tbody>
                            </table>
                            <%String sum = (String) session.getAttribute("paymentAmount");%>
                            <table class="table table-striped table-bordered" style="text-align: left;">
                                <tbody>
                                    <tr><h4>Payment Details</h4></tr>
                                <tr style="height: 10%">
                                    <td style="width: 25%; vertical-align: middle;">First Name</td>
                                    <td><input type="text" size="30" maxlength="32" name="firstName1"></td>
                                </tr>
                                <td style="width: 25%; vertical-align: middle;">Last Name</td>
                                <td><input type="text" size="30" maxlength="32" name="lastName"></td>
                                </tr>
                                <tr style="height: 10%">
                                    <td style="width: 25%; vertical-align: middle;">Total Payments</td>
                                    <td><output style="width: 100%; text-align: left">S$ <%out.print(sum);%></output></td>
                                </tr>
                                <tr style="height: 10%">
                                    <td style="width: 25%; vertical-align: middle;">Card Type</td>
                                    <td><select name="creditCardType">
                                            <option value="Visa">Visa</option>
                                            <option value="MasterCard">MasterCard</option>
                                            <option value="Discover">Discover</option>
                                            <option value="Amex">American Express</option>
                                        </select>
                                    </td>
                                </tr>
                                <tr style="height: 10%">
                                    <td style="width: 25%; vertical-align: middle;">Credit Card Number</td>
                                    <td><input type="text" size="19" maxlength="19" name="creditCardNumber" value="<%=oh.getCustomer().getCreditCardNumber()%>" style="width: 100%" onkeypress="validate(event)"></td>
                                </tr>
                                <tr>
                                    <td style="width: 15%; vertical-align: middle;">Expired Date</td>
                                    <td><select name="expDateMonth">
                                            <option value="1">01</option>
                                            <option value="2">02</option>
                                            <option value="3">03</option>
                                            <option value="4">04</option>
                                            <option value="5">05</option>
                                            <option value="6">06</option>
                                            <option value="7">07</option>
                                            <option value="8">08</option>
                                            <option value="9">09</option>
                                            <option value="10">10</option>
                                            <option value="11">11</option>
                                            <option value="12">12</option>
                                        </select><select name="expDateYear">
                                            <option value="2014">2014</option>
                                            <option value="2015">2015</option>
                                            <option value="2016">2016</option>
                                            <option value="2017">2017</option>
                                            <option value="2018">2018</option>
                                            <option value="2019">2019</option>
                                            <option value="2020">2011</option>
                                            <option value="2021">2021</option>
                                            <option value="2022">2022</option>
                                            <option value="2023">2023</option>
                                            <option value="2024">2024</option>
                                        </select></td>
                                </tr>
                                <tr style="height: 10%">
                                    <td style="width: 10%; vertical-align: middle;">CVN</td>
                                    <td><input type="text" size="3" maxlength="3" name="cvv2Number" style="width:12%" onkeypress="validate(event)"> </td>
                                </tr>
                                <tr style="height: 10%">
                                    <td style="width: 25%; vertical-align: middle;">Billing Address</td>
                                    <td><input name="shippingAddress" placeholder="Billing Address" style="width: 100%"></td>
                                </tr>

                                <tr style="height: 10%">
                                    <td style="width: 25%; vertical-align: middle;">Postal Code</td>
                                    <td><input name="ZIP" placeholder="Postal Code" style="width: 100%"></td>
                                </tr> 
                                </tbody>
                            </table>
                            <div>
                                <button name="pay" type="submit" style="margin-left: 50%;"><b> Pay Now </b></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
        <t:footer/>
    </body>
</html>
